<template>
  <div>
    <anovPart
      v-for="item in anovParts"
      :part="item"
      :key="item.id"
      :anovFile="anovFile"
    ></anovPart>
    <anovFocus />
  </div>
</template>
<script>
import anovPart from './anovPart'
import anovFocus from './anovFocus'
import { partServer, pageServer, animateServer } from 'anov-core'
import { mapMutations } from 'vuex'
import { cloneDeep } from 'dtc'
export default {
  name: 'anovPage',
  computed: {
    anovParts() {
      let currentPath = this.$route.path
      let page = pageServer.getPageByPath(currentPath) || {}
      return page.parts
    }
  },
  data() {
    return {}
  },
  props: {
    anovFile: {
      type: String,
      required: true
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      app.anovPage = app.partServer.getCompByTagName('anovPage')[0]
      if (app.config.autoInit === true) {
        app.$emit(app.EventType.pageReady)
      }
    })
  },
  methods: {
    ...mapMutations(['changeVueKey']),
    //页面进场
    enter() {
      // debugger
      let path = this.$route.path
      let tlConfig = pageServer.getPageByPath(path)?.tlConfig
      let option = cloneDeep({ tlConfig, path })
      let tlEnter =
        animateServer.getCurrentRouteTl('enter') ||
        animateServer.createTl(option)
      let anovParts = partServer.getCompByTagName('anovPart')
      let labelsArray = tlEnter.getLabelsArray()
      tlEnter.eventCallback('onStart', () => {
        app.config.isAnimate && app.$emit(app.EventType.pageTlStart)
        !app.config.isAnimate && tlEnter.progress(1).play()
      })
      tlEnter.eventCallback('onComplete', () => {
        app.config.isAnimate && app.$emit(app.EventType.pageTlEnd)
      })
      anovParts &&
        anovParts.forEach((part, i) => {
          let label = labelsArray.find((label) => label.name === part.$el.id)
          let time = label?.time || (3 * i) / 10
          try {
            let tl
            tlEnter.add((tl = part.init()), time).timeScale(1)
            if (!(tl instanceof TimelineLite || tl instanceof TweenLite)) {
              app.log(
                `${part.$el.id} the init method did not return a tiemline or tween`
              )
            }
          } catch (error) {
            app.log(
              `${part.$el.id} the init method did not return a tiemline or tween`
            )
          }
        })
      if (animateServer.animateDebug) {
        animateServer.killDevTool()
        animateServer.createDevTool('#con')
      }
    },
    // 页面退场
    leave(e) {
      let tl = app.animateServer.getCurrentRouteTl('enter')
      if (!tl || !e) return
      if (!app.config.isAnimate) {
        tl.clear(false)
        TweenMax && TweenMax.killAll()
        e.next()
      } else {
        let timeScale = app.pageServer.getPageByPath(
          e.from.path
        ).reverseTimeScale
        tl.eventCallback('onReverseComplete', () => {
          tl.reversed(false).clear(false)
          TweenMax && TweenMax.killAll()
          e.next()
        })
        tl.timeScale(timeScale).reverse()
      }

      // app.log('pageLeave')
    },
    update() {
      this.changeVueKey()
      let tlEnter = app.animateServer.getCurrentRouteTl('enter')
      if (tlEnter) tlEnter.clear(false)
    },
    updatePart(id) {
      if (!id) return
      this.$nextTick(() => {
        let part = app.partServer.getCompById(id)
        part?.update()
      })
    },
    deletePart(id) {
      if (!id) return
      let part = app.partServer.getCompById(id)
      part.removeTl()
      pageServer.deletePart(id)
    },
    resetPart(id) {
      if (!id) return
      pageServer.resetPart(id)
      this.$nextTick(() => {
        let part = app.partServer.getCompById(id)
        part?.reset()
      })
    }
  },
  components: { anovPart, anovFocus }
}
</script>
<style lang="scss" scoped></style>
